<template>
  <el-dialog 
    v-model="dialogVisible" 
    :title="messages.sessionExpiredTitle" 
    width="400px" 
    :close-on-click-modal="false"
    :close-on-press-escape="false"
    :show-close="false"
  >
    <div class="text-center">
      <el-icon class="text-red-500 text-4xl mb-4">
        <Warning />
      </el-icon>
      <p class="text-gray-600 mb-4">{{ messages.sessionExpiredContent }}</p>
      <p class="text-sm text-gray-500">{{ messages.sessionExpiredTip }}</p>
    </div>
    
    <template #footer>
      <div class="flex justify-center">
        <el-button type="primary" @click="handleReLogin">
          {{ messages.reLogin }}
        </el-button>
      </div>
    </template>
  </el-dialog>
</template>

<script setup lang="ts">
import { ref, watch } from 'vue';
import { Warning } from '@element-plus/icons-vue';
import { useRouter } from 'vue-router';

interface Props {
  visible: boolean;
  messages: Record<string, string>;
}

interface Emits {
  (e: 'update:visible', value: boolean): void;
}

const props = defineProps<Props>();
const emit = defineEmits<Emits>();
const router = useRouter();

const dialogVisible = ref(props.visible);

// 监听visible属性变化
watch(
  () => props.visible,
  val => {
    dialogVisible.value = val;
  }
);

// 监听dialogVisible变化，同步到父组件
watch(
  () => dialogVisible.value,
  val => {
    emit('update:visible', val);
  }
);

// 重新登录
const handleReLogin = () => {
  dialogVisible.value = false;
  router.push('/login');
};
</script> 